<template>
	<div class="club-content">
		<div class="btn-list-box">
			<p class="backgroundTitelBox">
				{{ $t('member.club_infor') }}
			</p>
			<el-button
				type="primary"
				icon="el-icon-refresh"
				:loading="refreshLoading"
				:disabled="refreshLoading"
				@click="refresh"
			>
				{{ $t('common.refresh') }}
			</el-button>
		</div>
		<el-table
			border
			v-loading="refreshLoading"
			element-loading-spinner="el-icon-loading"
			size="mini"
			:data="clubInfoList"
			:header-cell-style="getRowClass"
			highlight-current-row
			:max-height="tableHeight"
		>
			<el-table-column type="index" label="#" width="60" align="center" />
			<el-table-column
				label="会员账号"
				min-width="100"
				align="center"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					{{ scope.row.userName || '-' }}
				</template>
			</el-table-column>
			<el-table-column align="center" label="俱乐部ID" min-width="100">
				<template slot-scope="scope">
					<div
						class="text-link"
						@click="
							$router.push({
								path: '/dxn/clubManager/clubList',
								query: {
									clubId: scope.row.clubId
								}
							})
						"
					>
						{{ scope.row.clubId }}
					</div>
				</template>
			</el-table-column>
			<el-table-column
				align="center"
				label="俱乐部名称"
				min-width="160"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					{{ scope.row.clubName || '-' }}
				</template>
			</el-table-column>
			<el-table-column
				align="center"
				min-width="100"
				show-overflow-tooltip
			>
				<template slot="header">
					<div>是否会员</div>
					<div class="header-top-line">所属俱乐部</div>
				</template>
				<template slot-scope="scope">
					{{ scope.row.isMembersClub === 1 ? '是' : '否' }}
				</template>
			</el-table-column>
			<el-table-column align="center" label="参与手牌数" min-width="100">
				<template slot-scope="scope">
					{{ scope.row.handCount + '' || '-' }}
				</template>
			</el-table-column>
			<el-table-column
				align="center"
				label="累计俱乐部游戏有效投注"
				min-width="160"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					{{
						handleNumber(
							scope.row.currency,
							scope.row.validBetAmount
						)
					}}
				</template>
			</el-table-column>
			<el-table-column
				align="center"
				label="累计经典保险有效投注"
				min-width="160"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					{{
						handleNumber(
							scope.row.currency,
							scope.row.insuranceValidBetAmount
						)
					}}
				</template>
			</el-table-column>
			<el-table-column
				align="center"
				label="累计EV保险有效投注"
				min-width="160"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					{{
						handleNumber(
							scope.row.currency,
							scope.row.evInsuredValidBetAmount
						)
					}}
				</template>
			</el-table-column>
			<el-table-column
				align="center"
				label="累计俱乐部游戏盈利"
				min-width="160"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					<span :style="handleNumberColor(scope.row.netAmount)">
						{{
							handleNumber(
								scope.row.currency,
								scope.row.netAmount
							)
						}}
					</span>
				</template>
			</el-table-column>
			<el-table-column
				align="center"
				label="累计经典保险盈利"
				min-width="160"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					<span
						:style="handleNumberColor(scope.row.insuranceNetAmount)"
					>
						{{
							handleNumber(
								scope.row.currency,
								scope.row.insuranceNetAmount
							)
						}}
					</span>
				</template>
			</el-table-column>
			<el-table-column
				align="center"
				label="累计EV保险盈利"
				min-width="160"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					<span>
						{{
							handleNumber(
								scope.row.currency,
								scope.row.evInsuredNetAmount
							)
						}}
					</span>
				</template>
			</el-table-column>
			<el-table-column
				align="center"
				label="累计手牌服务费"
				min-width="160"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					<span>
						{{
							handleNumber(
								scope.row.currency,
								scope.row.userHandFee
							)
						}}
					</span>
				</template>
			</el-table-column>
			<el-table-column
				align="center"
				label="累计局服务费"
				min-width="160"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					<span>
						{{
							handleNumber(scope.row.currency, scope.row.tableFee)
						}}
					</span>
				</template>
			</el-table-column>
			<el-table-column
				align="center"
				label="累计鱿鱼盈亏"
				min-width="160"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					<span>
						{{
							handleNumber(
								scope.row.currency,
								scope.row.squidNetAmount
							)
						}}
					</span>
				</template>
			</el-table-column>
			<el-table-column
				align="center"
				label="累计发弹幕"
				min-width="160"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					{{
						handleNumber(
							scope.row.currency,
							scope.row.sendBarrageAmount
						)
					}}
				</template>
			</el-table-column>
			<el-table-column
				align="center"
				label="累计发表情"
				min-width="160"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					{{
						handleNumber(
							scope.row.currency,
							scope.row.sendEmoteAmount
						)
					}}
				</template>
			</el-table-column>
			<el-table-column
				align="center"
				label="累计发短语"
				min-width="160"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					{{
						handleNumber(
							scope.row.currency,
							scope.row.sendPuraseAmount
						)
					}}
				</template>
			</el-table-column>
			<el-table-column
				align="center"
				label="累计发语音"
				min-width="160"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					{{
						handleNumber(
							scope.row.currency,
							scope.row.sendVoiceAmount
						)
					}}
				</template>
			</el-table-column>
			<el-table-column
				align="center"
				label="累计看公牌"
				min-width="160"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					{{
						handleNumber(
							scope.row.currency,
							scope.row.lookPublicCardAmount
						)
					}}
				</template>
			</el-table-column>
			<el-table-column
				align="center"
				label="累计下注行动延时"
				min-width="160"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					{{
						handleNumber(
							scope.row.currency,
							scope.row.betActionDelayAmount
						)
					}}
				</template>
			</el-table-column>
			<el-table-column
				align="center"
				label="累计保险行动延时"
				min-width="160"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					{{
						handleNumber(
							scope.row.currency,
							scope.row.insureActionDelayAmount
						)
					}}
				</template>
			</el-table-column>
			<el-table-column
				align="center"
				label="累计互动道具"
				min-width="160"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					{{
						handleNumber(
							scope.row.currency,
							scope.row.interactPropAmount
						)
					}}
				</template>
			</el-table-column>
			<el-table-column
				align="center"
				label="累计看手牌"
				min-width="160"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					{{
						handleNumber(
							scope.row.currency,
							scope.row.lookHandAmount
						)
					}}
				</template>
			</el-table-column>
			<el-table-column
				align="center"
				label="累计打赏"
				min-width="160"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					{{
						handleNumber(
							scope.row.currency,
							scope.row.giveRewardAmount
						)
					}}
				</template>
			</el-table-column>
			<el-table-column
				align="center"
				label="累计互动道具返利"
				min-width="160"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					{{
						handleNumber(
							scope.row.currency,
							scope.row.interactivePropsRebateAmount
						)
					}}
				</template>
			</el-table-column>
			<el-table-column
				align="center"
				label="累计看手牌返利"
				min-width="160"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					{{
						handleNumber(
							scope.row.currency,
							scope.row.lookHandRebateAmount
						)
					}}
				</template>
			</el-table-column>
			<el-table-column
				align="center"
				label="累计打赏获得"
				min-width="160"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					{{
						handleNumber(
							scope.row.currency,
							scope.row.giveRewardAcquireAmount
						)
					}}
				</template>
			</el-table-column>
			<el-table-column
				align="center"
				label="累计手牌服务费贡献"
				min-width="160"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					{{
						handleNumber(
							scope.row.currency,
							scope.row.pumpContribution
						)
					}}
				</template>
			</el-table-column>
			<el-table-column
				align="center"
				label="累计局服务费贡献"
				min-width="160"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					{{
						handleNumber(
							scope.row.currency,
							scope.row.tableFeeContribution
						)
					}}
				</template>
			</el-table-column>
			<el-table-column
				align="center"
				label="累计入场弹幕"
				min-width="160"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					{{
						handleNumber(
							scope.row.currency,
							scope.row.entranceBarrageAmount
						)
					}}
				</template>
			</el-table-column>
			<el-table-column
				align="center"
				label="累计入座特效"
				min-width="160"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					{{
						handleNumber(
							scope.row.currency,
							scope.row.haveSeatSpecialEffectsAmount
						)
					}}
				</template>
			</el-table-column>
		</el-table>
		<el-pagination
			v-if="total"
			class="pageValue"
			background
			layout="total, sizes,prev, pager, next, jumper"
			:current-page.sync="pageNum"
			:page-size="pageSize"
			:page-sizes="pageSizes"
			:total="total"
			:pager-count="9"
			@current-change="handleCurrentChange"
			@size-change="handleSizeChange"
		/>
	</div>
</template>

<script>
import list from '@/mixins/list'
export default {
	mixins: [list],
	props: {
		parentData: { type: Object, default: () => ({}) }
	},
	data() {
		return {
			tableHeight: 480,
			refreshLoading: false,
			clubInfoList: []
		}
	},
	watch: {
		tableHeight: function() {
			this._initMainContent()
		}
	},
	created() {
		this._initMainContent()
	},
	destroyed() {
		window.removeEventListener('resize', this.calculateTableHeight)
	},
	methods: {
		loadData() {
			this.refreshLoading = true
			this.clubInfoList = []
			const params = this.getParams({ userId: this.parentData.userId })
			this.$api
				.getClubContributeListBend(params)
				.then((res) => {
					this.refreshLoading = false
					if (res?.code === 200) {
						this.clubInfoList = res?.data?.record || []
						this.total = res?.data?.totalRecord || 0
					}
				})
				.catch(() => {
					this.refreshLoading = false
				})
		},
		refresh() {
			this.loadData()
		},
		// 初始化
		_initMainContent() {
			this.$nextTick(() => {
				this.calculateTableHeight()
				window.addEventListener('resize', this.calculateTableHeight)
			})
		},
		// 计算table区域显示内容高度
		calculateTableHeight() {
			const CLIENT_HEIGHT = document.body.clientHeight
			const formArr = document.getElementsByClassName('el-form')
			let formHeight = 315
			for (let i = 0; i < formArr.length; i++) {
				formHeight += formArr[i]?.offsetHeight || 0
			}
			this.tableHeight = CLIENT_HEIGHT - formHeight
		}
	}
}
</script>

<style lang="scss" scoped>
.titelBox {
	font-size: 16px;
	font-weight: bold;
	line-height: 24px;
	margin: 40px 0 20px;
	display: inline-block;
}
.btn-list-box {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin-bottom: 20px;
	.backgroundTitelBox {
		width: 120px;
		height: 40px;
		line-height: 40px;
	}
}
.club-content {
	margin-left: 16px;
	margin-right: 16px;
	padding: 10px;
	border-radius: 1px;
	-webkit-box-shadow: 0 2px 7px #ccc;
	box-shadow: 0 2px 7px #ccc;
	.el-pagination {
		text-align: right;
		padding-right: 22px;
		margin-top: 10px;
	}
}
.header-top-line {
	margin-top: -8px;
}
</style>
